Instructional Visualizations: Applets
   


Info on how to run the applets
 

The visualization window is divided into three main areas according to the iTBeanKit:

  1. the “MainPanel”, where the hosts are connected to the bus and the animation takes place
  2. the “ParameterPanel”, where some of the interaction parameters can be adjusted, and
  3. the “TextArea” where the textual explanation of the animation can be drawn, in order to facilitate the understanding.

In addition to these three panel, the VCR, and the menu can be seen. In the VCR we notice two disabled buttons, which means that the interaction with them is not possible. This is either because the functionality is not implemented, or it does not make sense to use this buttons in the context, within which the applet is integrated

 

    To have a unified interaction model and thus to simplify the usage of the applets, two main parts of the graphical user interface can be identified:  The first is the unified control unit, formed by a menu placed at the top of the screen and a ControButtonPanel (VCR-like) placed at the bottom. This unified control unit is common for all applets. The VCR is in charge of steering the progression of the explanation, while the menu executes general actions like opening or saving a file, changing the language or the appearance of the frame up to providing help if wished, etc. The second part is built up by three different areas. The bigger one named “MainPanel” for illustrating the animation. The “TextArea” where messages of different kind (hints, errors,...) explaining the behavior of the topic to be visualized, appears and the “ParameterPanel”, in which diverse parameters of the current explanation can be changed. The size of the panels can be modified, giving flexibility to the visualization.

    The separation of texts and parameters from the main explanation seemed sensible because, once the user has changed the parameters he wants, he can concentrate his attention on the “MainPanel” or in a written explanation, seeing only things related to the explanation and not things that he does not need to concentrate on any more, like already changed parameters. This division of the graphical user interface has been proven to be very useful as students reported in the evaluation done.

 

 

The reasons for dividing the screen area in this way are the following:

  1. The menu provides general functions in a familiar appearance to the user.
  2. The VCR provides controls, whose appearance is also familiar to the users because they appear in several electronic devices such as videos, tape recorders, etc...making the operation of the programs very simple.
  3. The main panel consists of the most big area because it contains the core of the explanation and is the area where more attention has to be put on.

To separate the texts and parameters from the main explanation seemed sensible because, once the user has changed the parameters he wants, he can concentrate his attention on the main panel or in a written explanation, seeing only things related to the explanation and not things that he does not need to concentrate on any more, like already changed parameters.

  

Menu

It is formed by three pop up menus: File, Options and Help.

The File menu contains five menu items, as we can see in the following picture.

The first four items are: New, Open, Save and Save as. If these menu items are not needed, it is possible to disable them, so that a mouse click on them will not perform any action.

The Exit menu item calls a method that closes the frame after a confirm question

 
 

The Options menu contains three menu items

The language item contains as well three menu items, that give us the possibility to choose the language in which we want to obtan the explanation between English, German and Spanis.

The second item is Look&Feel and it makes possible to change the appearance of the environment. We can choose between Java Look&Feel, that is platform independent, Windows Look&Feel and Motif Look&Feel, which has a Unix like appearance.

The explanation item contains three menu items:

  1. Errors: indicates whether error messages can appear in the Text area or not.
  2. Hints: if selected, hints about next interaction will be displayed in the Text area.
  3. Audio: if selected, audio files will be played during the explanation